<template>
    <div class="df aic jcsb ">
        <p  class="main_text">报废车统计</p>
        <el-button type="primary" @click="backHome">返回首页</el-button>
    </div>
    <div class="main pr" style="z-index: 200; background-color: #e8eef4;">
        <div class="content">
          <el-row :gutter="10" >
            <el-col :span="12"  :lg="12" :md="12" :sm="24" :xs="24" style="margin-top: 10px;">
              <div class="first_left df fdc " style="height: 100%;">
                <div class="first_left_li p10 br8" style="background-color: #FFFFFF">
                  <div style="font-size: 0.875rem;">报废车拆解统计</div>
                  <div class="first_left_li_top df mt10 jcsa">
                    <div class="pl20">
                      <p style="font-size: 0.875rem; color: #4E5969;">已拆解</p>
                      <p style="color: #2E2E3A; font-size: 1.5rem;">{{ topFormData.已拆解 }}</p>
                    </div>
                    <div class="pl20" style="border-left: 0.0625rem dashed #E5E6EB;">
                      <p style="font-size: 0.875rem; color: #4E5969;">未拆解</p>
                      <p style="color: #2E2E3A; font-size: 1.5rem;">{{ topFormData.未拆解 }}</p>
                    </div>
                    <div class="pl20" style="border-left: 0.0625rem dashed #E5E6EB;">
                      <p style="font-size: 0.875rem; color: #4E5969;">拆解中</p>
                      <p style="color: #2E2E3A; font-size: 1.5rem;">{{ topFormData.拆解中 }}</p>
                    </div>
                  </div>
                </div>
                <div class="first_left_li p10 br8" style="background-color: #FFFFFF;flex: 1;margin-top: 10px;">
                  <div class="df aic jcsb" style="margin-top: 10px" >
                    <div style="font-size: 0.875rem;">当前拆解情况</div>
                    <div style="color: #B2B2B2; font-size: 0.75rem;">最近更新：{{ DismantlingTableDataTime }}</div>
                  </div>
                  <el-table :data="tableData" style="width: 100%" class="mt10"
                            :header-cell-style="{ 'background': '#000' }" :cell-style="{ textAlign: 'center' }">
                    <el-table-column prop="carInfo.incomeId" label="入场编号" width="200" />
                    <el-table-column prop="carInfo.carInfo.value.号牌号码" label="当前拆解车" />
                    <el-table-column prop="disassemblySheet.status" label="拆解进度" />
                  </el-table>
                </div>
              </div>
            </el-col>
            <el-col :span="12"  :lg="12" :md="12" :sm="24" :xs="24" style="margin-top: 10px;">
              <div class="first_right p10 br8" style="background-color: #FFFFFF">
                <div class="df aic jcsb">
                  <div style="font-size: 0.875rem;">平台车辆来源趋势</div>
                  <div style="color: #B2B2B2; font-size: 0.75rem;">最近更新：{{ DismantlingTableDataTime }}</div>
                </div>
                <div class="pr">
                  <ScrapCar_echarts_1></ScrapCar_echarts_1>
                </div>
              </div>
            </el-col>
          </el-row>
<!--            <div class="first df aic jcsb">-->
<!--                <div class="first_left df fdc jcsb">-->
<!--                    <div class="first_left_li p10 br8">-->
<!--                        <div style="font-size: 0.875rem;">报废车拆解统计</div>-->
<!--                        <div class="first_left_li_top df mt10">-->
<!--                            <div class="pl20">-->
<!--                                <p style="font-size: 0.875rem; color: #4E5969;">已拆解</p>-->
<!--                                <p style="color: #2E2E3A; font-size: 1.5rem;">{{ topFormData.已拆解 }}</p>-->
<!--                            </div>-->
<!--                            <div class="pl20" style="border-left: 0.0625rem dashed #E5E6EB;">-->
<!--                                <p style="font-size: 0.875rem; color: #4E5969;">未拆解</p>-->
<!--                                <p style="color: #2E2E3A; font-size: 1.5rem;">{{ topFormData.未拆解 }}</p>-->
<!--                            </div>-->
<!--                            <div class="pl20" style="border-left: 0.0625rem dashed #E5E6EB;">-->
<!--                                <p style="font-size: 0.875rem; color: #4E5969;">拆解中</p>-->
<!--                                <p style="color: #2E2E3A; font-size: 1.5rem;">{{ topFormData.拆解中 }}</p>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="first_left_li p10 br8">-->
<!--                        <div class="df aic jcsb">-->
<!--                            <div style="font-size: 0.875rem;">当前拆解情况</div>-->
<!--                            <div style="color: #B2B2B2; font-size: 0.75rem;">最近更新：{{ DismantlingTableDataTime }}</div>-->
<!--                        </div>-->
<!--                        <el-table :data="tableData" style="width: 100%" class="mt10"-->
<!--                            :header-cell-style="{ 'background': '#000' }" :cell-style="{ textAlign: 'center' }">-->
<!--                            <el-table-column prop="carInfo.incomeId" label="入场编号" width="200" />-->
<!--                            <el-table-column prop="carInfo.carInfo.value.号牌号码" label="当前拆解车" />-->
<!--                            <el-table-column prop="disassemblySheet.status" label="拆解进度" />-->
<!--                        </el-table>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="first_right p10 br8">-->
<!--                    <div class="df aic jcsb">-->
<!--                        <div style="font-size: 0.875rem;">平台车辆来源趋势</div>-->
<!--                        <div style="color: #B2B2B2; font-size: 0.75rem;">最近更新：{{ DismantlingTableDataTime }}</div>-->
<!--                    </div>-->
<!--                    <div class="pr">-->
<!--                        <ScrapCar_echarts_1></ScrapCar_echarts_1>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

          <el-row :gutter="10">
            <el-col :span="12"  :lg="12" :md="12" :sm="24" :xs="24" style="margin-top: 10px">
              <div class="third_left p10 br8" style="background-color: #FFFFFF">
                <div style="font-size: 0.875rem;">回收报废车统计</div>
                <div class="pr">
                  <ScrapCar_echarts_3></ScrapCar_echarts_3>
                </div>
              </div>
            </el-col>
            <el-col :span="12"  :lg="12" :md="12" :sm="24" :xs="24" style="margin-top: 10px">
              <div class="third_right p10 br8" style="background-color: #FFFFFF">
                <div style="font-size: 0.875rem;">报废车类型统计</div>
                <div class="pr">
                  <ScrapCar_echarts_5></ScrapCar_echarts_5>
                </div>
              </div>
            </el-col>
          </el-row>




          <el-row :gutter="10">
            <el-col :span="8"  :lg="8" :md="8" :sm="24" :xs="24" style="margin-top: 10px">
              <div class="fifth_li p10 br8" style="background-color: #FFFFFF;height: 100%" >
                <div class="df aic jcsb" >
                  <div style="font-size: 0.875rem;">车辆报废类型</div>
                </div>
                <div class="pr" >
                  <ScrapCar_echarts_6></ScrapCar_echarts_6>
                </div>
              </div>
            </el-col>
            <el-col :span="8"  :lg="8" :md="8" :sm="24" :xs="24" style="margin-top: 10px">
              <div class="fifth_li p10 br8" style="background-color: #FFFFFF">
                <div class="df aic jcsb" >
                  <div style="font-size: 0.875rem;">车辆来源</div>
                  <el-radio-group size="small" v-model="radioSource" text-color="#000" fill="#fff">
                    <el-radio-button label="今日" />
                    <el-radio-button label="全部" />
                  </el-radio-group>
                </div>
                <div class="pr" v-if="radioSource == '今日'">
                  <ScrapCar_echarts_7></ScrapCar_echarts_7>
                </div>
                <div class="pr" v-if="radioSource == '全部'">
                  <ScrapCar_echarts_7_1></ScrapCar_echarts_7_1>
                </div>
              </div>
            </el-col>
            <el-col :span="8"  :lg="8" :md="8" :sm="24" :xs="24" style="margin-top: 10px">
              <div class="fifth_li p10 br8" style="background-color: #FFFFFF">
                <div class="df aic jcsb">
                  <div style="font-size: 0.875rem;">车辆类型</div>
                  <el-radio-group size="small" v-model="radioType" text-color="#000" fill="#fff">
                    <el-radio-button label="今日" />
                    <el-radio-button label="全部" />
                  </el-radio-group>
                </div>
                <div class="pr" v-if="radioType == '今日'">
                  <ScrapCar_echarts_8></ScrapCar_echarts_8>
                </div>
                <div class="pr" v-if="radioType == '全部'">
                  <ScrapCar_echarts_8_1></ScrapCar_echarts_8_1>
                </div>
              </div>
            </el-col>
          </el-row>


<!--            <div class="third df aic jcsb">-->
<!--                <div class="third_left p10 br8">-->
<!--                    <div style="font-size: 0.875rem;">回收报废车统计</div>-->
<!--                    <div class="pr">-->
<!--                        <ScrapCar_echarts_3></ScrapCar_echarts_3>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="third_right p10 br8">-->
<!--                    <div style="font-size: 0.875rem;">报废车类型统计</div>-->
<!--                    <div class="pr">-->
<!--                        <ScrapCar_echarts_5></ScrapCar_echarts_5>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="fifth df aic jcsb">-->
<!--                <div class="fifth_li p10 br8">-->
<!--                    <div class="df aic jcsb">-->
<!--                        <div style="font-size: 0.875rem;">车辆报废类型</div>-->
<!--                        &lt;!&ndash; <div style="color: #B2B2B2; font-size: 0.75rem;">最近更新：20232342432</div> &ndash;&gt;-->
<!--                    </div>-->
<!--                    <div class="pr">-->
<!--                        <ScrapCar_echarts_6></ScrapCar_echarts_6>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="fifth_li p10 br8">-->
<!--                    <div class="df aic jcsb">-->
<!--                        <div style="font-size: 0.875rem;">车辆来源</div>-->
<!--                        <el-radio-group size="small" v-model="radioSource" text-color="#000" fill="#fff">-->
<!--                            <el-radio-button label="今日" />-->
<!--                            <el-radio-button label="全部" />-->
<!--                        </el-radio-group>-->
<!--                    </div>-->
<!--                    <div class="pr" v-if="radioSource == '今日'">-->
<!--                        <ScrapCar_echarts_7></ScrapCar_echarts_7>-->
<!--                    </div>-->
<!--                    <div class="pr" v-if="radioSource == '全部'">-->
<!--                        <ScrapCar_echarts_7_1></ScrapCar_echarts_7_1>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="fifth_li p10 br8">-->
<!--                    <div class="df aic jcsb">-->
<!--                        <div style="font-size: 0.875rem;">车辆类型</div>-->
<!--                        <el-radio-group size="small" v-model="radioType" text-color="#000" fill="#fff">-->
<!--                            <el-radio-button label="今日" />-->
<!--                            <el-radio-button label="全部" />-->
<!--                        </el-radio-group>-->
<!--                    </div>-->
<!--                    <div class="pr" v-if="radioType == '今日'">-->
<!--                        <ScrapCar_echarts_8></ScrapCar_echarts_8>-->
<!--                    </div>-->
<!--                    <div class="pr" v-if="radioType == '全部'">-->
<!--                        <ScrapCar_echarts_8_1></ScrapCar_echarts_8_1>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref,onMounted } from 'vue';
import { formatTime } from '@/filters/index'
import { RequestStatisticGetCarScale, RequestStatisticGetCarNumOfDS } from "@/api/path/index.js"
import { useRouter } from 'vue-router';
const router = useRouter()
const radioSource = ref('今日')
const radioType = ref('今日')
import ScrapCar_echarts_1 from '@/components/ScrapCar/ScrapCar_echarts_1.vue'
import ScrapCar_echarts_2 from '@/components/ScrapCar/ScrapCar_echarts_2.vue'
import ScrapCar_echarts_3 from '@/components/ScrapCar/ScrapCar_echarts_3.vue'
import ScrapCar_echarts_4 from '@/components/ScrapCar/ScrapCar_echarts_4.vue'
import ScrapCar_echarts_5 from '@/components/ScrapCar/ScrapCar_echarts_5.vue'
import ScrapCar_echarts_6 from '@/components/ScrapCar/ScrapCar_echarts_6.vue'
import ScrapCar_echarts_7 from '@/components/ScrapCar/ScrapCar_echarts_7.vue'
import ScrapCar_echarts_7_1 from '@/components/ScrapCar/ScrapCar_echarts_7_1.vue'
import ScrapCar_echarts_8 from '@/components/ScrapCar/ScrapCar_echarts_8.vue'
import ScrapCar_echarts_8_1 from '@/components/ScrapCar/ScrapCar_echarts_8_1.vue'
const tableData = ref<any>([
    {
        name: 1231
    }
])
const scrapCar = ref<any>([])                               //报废车
const DismantlingTableDataTime = ref<any>('')               //时间
const topFormData = ref<any>('')                            //时间
const getData = () => {
    RequestStatisticGetCarNumOfDS().then((res: any) => {
        res.resultObj.拆解中车辆.data[0].carInfo.carInfo.value = JSON.parse(res.resultObj.拆解中车辆.data[0].carInfo.carInfo.value)
        DismantlingTableDataTime.value = formatTime(res.resultObj.拆解中车辆.data[0].disassemblySheet.updatedAt)
        topFormData.value = res.resultObj
        tableData.value = res.resultObj.拆解中车辆.data
    })
    /* 报废车统计 */
    RequestStatisticGetCarScale().then((res: any) => {
        scrapCar.value = res.resultObj
    })
}
getData()

/* 返回首页 */
const backHome = () => {
    router.push('/Home')
}
</script>

<style scoped lang="scss">
.listStyle {
    width: 50%;
    height: 100%;
    border-right: 0.0625rem dashed #ccc;

    &:last-child {
        border-right: none
    }
}

.main {
  //  width: v-bind(width);
  //height: 768px;
  //overflow-y: auto;
    .content {
        width: 100%;
        height: 100%;
        //display: flex;
        //flex-direction: column;
    //background-color: #FFFFFF;
    //    justify-content: space-between;
    //    .first {
    //        width: 100%;
    //        height: calc(33.33% - 10px);
    //
    //        .first_left {
    //            width: calc(50% - 0.625rem);
    //            height: 100%;
    //
    //            .first_left_li {
    //                width: 100%;
    //                height: calc(45% - 0.625rem);
    //                background-color: #fff;
    //
    //                &:last-child {
    //                    height: calc(55% - 0.625rem);
    //                }
    //
    //                .first_left_li_top {
    //                    div {
    //                        width: 33.33%;
    //                    }
    //                }
    //            }
    //        }
    //
    //        .first_right {
    //            width: calc(50% - 0.625rem);
    //            height: 100%;
    //            background-color: #fff;
    //        }
    //    }


        .third {
            width: 100%;
            height: calc(33.33% - 10px);

            .third_left {
                width: calc(50% - 0.625rem);
                height: 100%;
                background-color: #fff;
            }

            .third_right {
                width: calc(50% - 0.625rem);
                height: 100%;
                background-color: #fff;
            }
        }

        .fifth {
            width: 100%;
            height: calc(33.33% - 10px);

            .fifth_li {
                width: calc(33.33% - 0.9375rem);
                height: 100%;
                background-color: #fff;
            }

        }
    }
}

.fifth_list_b {
    width: 100%;
    background-color: #f5f7fa;

}

.el-divider--horizontal {
    border-top: 0.0625rem dashed #e8eaec;
}

::v-deep .el-table th {
    text-align: center;
    background-color: #f6f8fa !important;
    border-right: 0.0625rem solid #fff;
    color: #ffffff;

    &:first-child {
        border-radius: 0.625rem 0rem 0rem 0.625rem;
    }

    &:last-child {
        border-radius: 0rem 0.625rem 0.625rem 0rem;
    }
}

::v-deep .el-radio-group {
    background-color: #f6f8fa;
    border: 0.125rem solid #f6f8fc;
}

::v-deep .el-radio-button--small .el-radio-button__inner {
    background-color: rgba($color: #000000, $alpha: 0);
    border: none;
}
</style>
 